<template>
  <div>    
    <el-button slot="reference" size="mini" @click="dialogVisible=true">点击录入</el-button>    
    <el-dialog
      :title="fld.title"
      :visible.sync="dialogVisible"
      append-to-body
      @open="handleOpen"
      ref="dialog"
      :width="width"
      >
      <!-- 动态显示表单项 -->
      <el-form ref="form" label-width="100px" size="mini">
        <el-form-item 
          v-for="item,i in fld.formItems"
          :key="item.name"
          :label="item.title"
          :prop="item.name"
          label-width="100px">
          <component
            :is="item.type"
            :fld="item"
            :value="value[item.name]"
            @input="value[item.name]=arguments[0]"
            :row="$attrs.row[fld.name]"
            :ref="item.name"></component>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleOk" type="primary">确 认</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
  define(['vue'],function(vue){
    return vue.component('comp-popup-form',{
      props : {
        fld :{required:true},
        value :{required:false,default:function(){
          return {};
        }},
      },
      created:function(){
        //如果内置组件使用了popup组件(以客户选择为例),选中记录时,需要改变的不仅仅是clientId,而且还包含了compName
        //compName必须作为子表记录的一个字段存在,而不仅仅是一个组件属性,
        //这样选中一个客户时,子表记录的compName和clientId字段都变化了,这样在进行上下移动时,才正常
        if(!this.$attrs.row[this.fld.name]) {
          //this.$attrs.row[this.fld.name]会作为comp-popup-select组件的row属性往下传递
          vue.set(this.$attrs.row,this.fld.name,{});
        }
      },
      data:function(){
        return {
          //对话框是否显示
          dialogVisible:false,
          width:this.fld.width || "50%",
          //作为初始值传递过来得json对象
          // dataJson : {name:'a',tel:'1212'},
        };
      },
      template: template,
      methods:{
        //设置displayText的值

        //以下事件没用了,都是在handelselect事件中处理了
        // handleModelInput :function(val){
        //   this.$emit("input", val);
        // },
        //dialog打开前的回调
        handleOpen :function(){
          var key = `${this.fld.name}:open`;
          if(this.$root.callbacks[key]) {
            this.$root.callbacks[key].apply(this,[this]);
          }
          //dom元素生成后,从服务器获取数据
          // this.$nextTick(()=>{
          //   this.$refs.table.multiSelect = this.multiSelect;
          //   this._getRows();
          // });
        },
        handleOk : function() {
          this.dialogVisible = false;
        },
      },
      computed:{
        // text:function(){
        //   return this.displayText || this.$attrs.row[this.fld.displayKey];
        // }
      },
      watch : {
        //在选中不同子表记录时会触发这个变化
        // 'displayText':  {
        //   handler : function(newVal,oldVal) {
        //     // dump(`弹出选择控件${this.fld.name}.displayText change`,newVal,oldVal);        
        //     this.text = newVal;
        //   }
        // }
      }
    });
  });
</script>